<template  >
  <div class="app-container" >
    <el-row :gutter="10">
      <el-col :span="12" >
          <el-row>
             <el-col :span="24">
              <el-card class="box-card" shadow="never">
                <div  class="text item">
                  <el-row class="left">
                    <el-col :span="8">
                          <div class="project_progress"></div>
                    </el-col>
                    <el-col :span="16">

                      <el-descriptions :title="this.form.projectName" :column="2">
                        <el-descriptions-item label="项目编号">{{ this.form.projectNo }}</el-descriptions-item>
                        <el-descriptions-item label="项目状态"><el-button type="success" v-show="this.form.overdue==0" plain size="mini">正常</el-button><el-button v-show="this.form.overdue==1" type="danger" plain size="mini">延期</el-button></el-descriptions-item>
                        <el-descriptions-item label="MRD OA单">
                          <el-tooltip   effect="dark" content="查看OA审核单" placement="top">
                            <a style="color: cornflowerblue;"   @click="linkToOA(form.mrdOaId)">{{ this.form.mrdOaNo }} <i class="el-icon-link"></i></a> 
                          </el-tooltip>
                        </el-descriptions-item>
                         
                        <el-descriptions-item label="PRD OA单">
                          <el-tooltip   effect="dark" content="查看OA审核单" placement="top">
                            <a style="color: cornflowerblue;"  @click="linkToOA(form.prdOaId)">{{ this.form.prdOaNo }} <i class="el-icon-link"></i></a> 
                          </el-tooltip>
                        </el-descriptions-item>

                        <el-descriptions-item label="项目经理">{{ this.form.projectManagerName }}</el-descriptions-item>
                        <el-descriptions-item label="级别">
                          <dict-tag :options="dict.type.project_level"   :value="this.form.level" />
                        </el-descriptions-item>
                        <el-descriptions-item label="产品类型">
                          <dict-tag :options="dict.type.product_type"   :value="this.form.productType" />
                        </el-descriptions-item>
                        <el-descriptions-item label="产品线">
                          <dict-tag :options="dict.type.product_line"   :value="this.form.productLine" />
                        </el-descriptions-item>
                         
                        </el-descriptions>


                       
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col> 
            
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-card class="box-card left_item_card" shadow="never">
                <div slot="header" class="clearfix">
                  <span class="item_title_left">项目说明</span>
                  <el-button type="primary" icon="el-icon-share" style="float: right;" @click="drawer = true" >查看操作日志</el-button>
                  
                </div>
                <div  class="text item" >
                   {{ this.form.remark }}
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-card class="box-card left_item_card" shadow="never">
                <div slot="header" class="clearfix">
                  <span class="item_title_left">里程碑</span>
                </div>
                <div  class="text item" v-loading="milestonesLoading"> 
                  <el-steps    direction="horizontal" align-center  >
                    <el-step  :title="o.nodeName" v-for="o in res.milestones" :status="getStepStatus(o)"  :description="handleDesc(o)"></el-step>
                  </el-steps> 
                </div>
              </el-card>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="24">
              <el-card class="box-card left_item_card" shadow="never">
                <div slot="header" class="clearfix">
                  <span class="item_title_left">项目成员</span>
                  <el-button icon="el-icon-edit" style="float: right; padding: 3px 0" v-show="currUser.userId == form.projectManager" @click="handleEditMember" v-hasPermi="['projectManage:list:update']" type="text">编辑成员</el-button> 
                </div>
                <div  class="text item member_div" >
                   <table class="member_table">
                      <tr>
                        <td v-for="o in  projectMemberList " >
                           <el-row> <div class="member" :style="randomBgColor(o.id)">{{ rosvleName(o.projectManagerName) }}</div> </el-row>
                           <el-row>{{ o.projectManagerName }}</el-row>
                           <el-row class="member_bom">{{ o.typeName }}</el-row>
                        </td>
                      </tr>
                   </table>
                </div>
              </el-card>
            </el-col>
          </el-row>
          

          <el-row>
            <el-col :span="24">
              <el-card class="box-card left_item_card" shadow="never">
                <div slot="header" class="clearfix">
                  <span class="item_title_left">BUG LIST</span>
                </div>
                <div  class="text item" v-loading="buglistLoading">

                  <el-empty v-if="this.bugData.totalNum == 0" description="暂无数据"></el-empty>
                  <el-row v-else class="left"> 
                    <el-col :span="6">
                      <div class="bugNum">
                        <el-descriptions title="BUG数据" :column="1"   :colon="false">
                          <el-descriptions-item label="总数" >{{ this.bugData.totalNum }}</el-descriptions-item>
                          <el-descriptions-item label="已完成" >{{ this.bugData.doneNum }}</el-descriptions-item>
                          <el-descriptions-item label="待完成" >{{ this.bugData.toDoNum }}</el-descriptions-item>
                          <el-descriptions-item label="waived" >{{ this.bugData.waivedNum }}</el-descriptions-item>
                        </el-descriptions>
                      </div>
                    </el-col>
                   
                    <el-col :span="8">
                      <el-row>
                        <el-col :span="24">
                          <div class="progressView">
                            <el-progress type="circle"   :width="140" :show-text="false" :stroke-width="15" color="#8AE7BA" :percentage="bugData.doneRate" class="bugFormat"></el-progress>
                          </div>
                          <div class="formatText">
                            <p class="label">bug修复率</p>
                            <p class="value">{{ this.bugData.doneRate }}%</p>
                          </div> 
                        </el-col>
                      </el-row>    
                    </el-col>
                    <el-col :span="10">
                      <div class="bug_type"></div>
                    </el-col>
                     
                   </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>  
          <el-row>
            <el-col :span="24">
              <el-card class="box-card left_item_card" shadow="never">
                <div slot="header" class="clearfix">
                  <span class="item_title_left">变更记录</span>
                </div>
                <div  class="text item member_div" style="min-height: 300px;" v-loading="projectModifyRecordLoading">
                  <el-empty v-if="projectModifyRecord.length==0" description="暂无变更"></el-empty>
                  <el-table v-else
                    :data="projectModifyRecord"
                    
                    style="width: 100%">
                    
                    <el-table-column type="expand">
                      <template slot-scope="props">
                        <el-table v-if="props.row.type == 10" 
                        :data="props.row.projectModifyRecordDetailList"
                        style="width: 100%">
                        <el-table-column label="变更阶段"  prop="nodeName"> </el-table-column>
                        <el-table-column label="原开始时间"  prop="startTime"> </el-table-column>
                        <el-table-column label="原结束时间"  prop="endTime"> </el-table-column>
                        <el-table-column label="变更后开始时间"  prop="newStartTime"> </el-table-column>
                        <el-table-column label="变更后结束时间"  prop="newEndTime"> </el-table-column>
                      </el-table>
                      <el-table  v-else
                        :data="[props.row]"
                        style="width: 100%">
                        <el-table-column label="变更前项目经理"  prop="oldProjectManagerName"> </el-table-column> 
                        <el-table-column label="变更后项目经理"  prop="modifyProjectManagerName"> </el-table-column>
                      </el-table>
                      </template>
                    </el-table-column>
                    <el-table-column label="OA编号"  prop="oaNo">
                        <template  slot-scope="scope">
                          <a style="color: cornflowerblue;"   @click="linkToOA(scope.row.oaId)">{{ scope.row.oaNo }}</a> 
                        </template>
                    </el-table-column>
                    <el-table-column label="状态"  prop="status">
                        <template slot-scope="scope">
                          <dict-tag :options="dict.type.project_task_status" :value="scope.row.status" />
                        </template>
                    </el-table-column>
                    <el-table-column label="类型"  prop="type">
                      <template slot-scope="scope">
                        <dict-tag :options="dict.type.modify_project_type" :value="scope.row.type" />
                      </template>
                  </el-table-column>
                    <el-table-column label="创建时间"  prop="createTime" width="150"> </el-table-column>
                    <el-table-column label="操作">
                      <template slot-scope="scope">
                        <el-button size="mini" type="text"   icon="el-icon-edit-outline" @click="handleUpdateProjectModify(scope.row)" v-show="scope.row.status == 2 " v-hasPermi="['projectManage:project:modify']">修改</el-button>
                      </template>
                    </el-table-column>
                  </el-table>
                  <pagination v-show="total > 0" :total="total" :page-sizes="[3]" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="handleProjectModifyRecord" />
                </div>
              </el-card>
            </el-col>
          </el-row>

      </el-col>
      <el-col :span="12" >
        <el-card class="box-card " shadow="never">
          <div slot="header" class="clearfix">
            <span class="item_title">任务</span> 
            <el-button
              type="warning"
              style="margin-left:50px"
              plain
              icon="el-icon-download"
              size="mini"
              @click="handleExport" 
            >导出任务进度</el-button>
            <span class="item_version">模版版本:{{ this.versionNo }}</span>
          </div>
          <div  class="text item" style="padding: 0px;">
             <el-table 
              :data="tableData"
              style="width: 100%;margin-bottom: 20px;"
              row-key="id"
              :border="false"
              :show-header="false"
              default-expand-all
              v-loading="taskLoading"
              :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
               
              <el-table-column  prop="nodeName"  label="节点" width="400" >
                  <template  slot-scope="scope">
                    <span>{{scope.row.nodeName}}</span> <el-button v-if="scope.row.projectListNodeMemberList && scope.row.projectListNodeMemberList.length" size="small" type="warning" v-hasPermi="['projectManage:list:delNode']"  @click="handleRemoveNode(scope.row)" plain>删除节点</el-button> 
                  </template>
              </el-table-column>
              <el-table-column>
                <template v-slot="{row, $index: index}">
                  <el-table v-if="row.projectListNodeMemberList && row.projectListNodeMemberList.length" :data="row.projectListNodeMemberList" :show-header="false" class="customer-no-border-table">
                    <el-table-column prop="postName" width="200">
                       <template slot-scope="scope">
                        <el-row >
                          <el-col :span="24">
                            <el-row><el-col v-show="scope.row.startTime > 0 ">{{ scope.row.startTime }}-{{ scope.row.endTime }}</el-col></el-row>
                            <el-row ><el-col :span="12">{{ scope.row.ownerUserName }}</el-col><el-col  :span="12"><el-tooltip class="item" effect="dark" content="修改责任人" placement="top-start"><el-button  v-show="currUser.userId == form.projectManager && scope.row.status == 0"  icon="el-icon-edit" size="mini" @click="handleModifyUser(scope.row)"></el-button></el-tooltip></el-col></el-row>
                            <el-row  v-show="scope.row.status == 10 ">
                              <el-col :span="20" v-show="scope.row.type == 10 ">
                                <el-tooltip class="item" effect="dark"  content="查看OA审核单" placement="top">
                                  <a style="color: cornflowerblue;"   @click="linkToOA(scope.row.oaId)"> {{ scope.row.oaNo }} <i class="el-icon-link"></i></a> 
                                </el-tooltip> 
                              </el-col>
                              <el-col  :span="4">
                                <el-tooltip class="item" effect="dark" content="下载附件" placement="top">
                                  <a style="color: cornflowerblue;"    @click="handleFileList(scope.row)"> <i class="el-icon-download" style="font-size: 20px; "></i></a> 
                                </el-tooltip>
                              </el-col>
                           </el-row>
                          </el-col>
                        </el-row>
                       </template> 
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="地址"
                      width="50">
                      <template slot-scope="scope" >
                        <div v-show="scope.row.overdue==0 && scope.row.status == 10">
                          <el-tooltip class="item" effect="dark" content="按时完成" placement="top">
                            <i class="el-icon-circle-check"   style="color:hsl(115, 100%, 50%);font-size:30px"></i> 
                         </el-tooltip> 
                        </div> 
                        <div v-show="scope.row.overdue==1 && scope.row.status == 10">
                          <el-tooltip class="item" effect="dark" content="延期完成" placement="top" >
                            <i class="el-icon-circle-check"  style="color:hsl(357, 85%, 53%);font-size:30px"></i> 
                          </el-tooltip>
                        </div>
                    </template>
                    </el-table-column>
                  </el-table>
                  <el-row v-else>
                     
                    <el-col :span="24">
                      <el-tooltip class="item" effect="dark" content="阶段进度" placement="top-start">
                        <el-progress  type="circle" :percentage="row.doneRate" :width="40"></el-progress>
                      </el-tooltip>
                      </el-col>
                  </el-row>
                    
                  
                </template>
              </el-table-column>
              
              
            </el-table>
          </div>
        </el-card>
      </el-col>

    </el-row>

    <el-drawer
      title="项目操作日志"
      :visible.sync="drawer"  >

      <el-empty v-if="logs.length==0" description="暂无记录"></el-empty>

      <div v-else class="block">
        <el-timeline>
          <el-timeline-item  v-for="log in logs" :timestamp="log.nickName" placement="top">
            <el-card>
              <h4>{{ log.remark }}</h4>
              <p>提交于 {{ log.createTime }}</p>
            </el-card>
          </el-timeline-item>
           
        </el-timeline>
      </div>
    </el-drawer>




    <el-dialog :title="title" :visible="open" v-loading="dialogLoading" @close="close" width="800px"  :close-on-click-modal="false" :close-on-press-escape="false"
        append-to-body>


        <el-table border   :data="fileList" :border="false"  >
            <el-table-column label="文件名称" align="center" prop="originName" />
            <el-table-column label="版本" align="center" prop="versionNo" width="100">
              <template slot-scope="scope">
                <el-tag>V{{ scope.row.versionNo }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column label="上传时间" align="center" prop="createTime" width="150"/>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right" width="150">
              <template slot-scope="scope">
                <el-button type="success" @click="handleDownFile(scope.row)" icon="el-icon-download" circle> </el-button>
              </template>
            </el-table-column>
        </el-table>



        
        <span slot="footer" class="dialog-footer" > 
          <el-button  @click="close">关闭</el-button>
        </span>  
  </el-dialog>


  <el-dialog title="修改责任人" :visible="modifyUserOpen" v-loading="modifyUserLoading" @close="closeModifyUser" width="500px"  :close-on-click-modal="false" :close-on-press-escape="false"
        append-to-body>

        <el-form ref="modifyUserForm" :model="modifyUserForm" label-width="80px">
          <el-form-item label="责任人">
            <el-select  v-model="modifyUserForm.userId" filterable clearable  style="width: 100%;">
              <el-option v-for="user in userList" :key="user.userId" :label="user.nickName" :value="user.userId" />
            </el-select> 
          </el-form-item>
          
        </el-form>
         
        <span slot="footer" class="dialog-footer" > 
          <el-button  @click="submitModifyUser">提交</el-button>
        </span>  
  </el-dialog>



  <modify ref="modify" @query="handleProjectModifyRecord"  :title="title"></modify>
  <modify-member ref="modifyMember" @closeback="loadProjectDetail" ></modify-member>
    
  </div>
</template>

<script>

import * as echarts from 'echarts';
import {getDetail,getMilestone,queryProjectModifyRecord,queryProjectOperLog}  from "@/api/projectManage/projectList";
import {getSetupDetail,removeNode}  from "@/api/projectManage/setup";
import {signLoginToEkp}  from "@/api/oa/oa";
import {queryTotalBugTypeByProject,queryTotalBugByProject}  from "@/api/business/bugs";
import {queryTaskFile,modifyTaskUser,queryPLMFileUrl}  from "@/api/projectManage/task";
import { downloadFileId } from '@/utils/DownloadUtils'
import modify from "@/components/projectManage/list/modifyProject";
import modifyMember from "@/components/projectManage/list/modifyMember";
import {getUserProfile,getTaskUsers}  from "@/api/system/user";

 
export default {
  name: "ProjectDetail",
  components: { modify,modifyMember },
  dicts: ['project_list_status','owner_position','project_task_status','project_level','product_line','product_type','modify_project_type'],
  data() {
    return {
       drawer: false,
       modifyUserOpen:false,
       modifyUserLoading:false,
       taskLoading:false,
       projectModifyRecordLoading:false,
       buglistLoading:false,
       milestonesLoading:false,
       form:{},
       modifyUserForm:{userId:null,id:null},
       //项目成员
       projectMemberList:[],
        //版本
        versionNo:null,
       //背景颜色
       bgColor:[
         "#ff9940",
         "#d38d2f",
         "#c5c821",
         "#5597e4",
         "#af90b0",
         "#53a875",
         "#bfa468",
         "#6bbf68",
         "#9c4b84",
         "#43928e",
         "#8cb7e4",
         "#7f3c4c",
         "#cb3a5c",
         "#413acb" 
       ],
       tableData: [ ],
       res: { },
       open:false,
       title:"附件下载",
       dialogLoading:false,
       fileList:[],
       bugData:{
         waivedNum:0,
         doneNum:0,
         toDoNum:0,
         totalNum:0,
         doneRate:0
       },
       //变更记录
       projectModifyRecord:[],
       total:0,
       queryParams:{
        pageNum:1,
        pageSize:3,
        id:null
       },
       logs:[],
       currUser:{},
       userList:[] 
         
      
  
    };
  },
  mounted() {
    
  },
  created() {
    this.loadProjectDetail();  
  },

  watch: {
    // 监听路由变化，当路由变化时重新加载数据
    '$route': 'loadProjectDetail'
  },
  mounted() {
    this.getProjectProgressChart('0');
    this.getBugTypeChart([]);
  },
 
  methods: {

    //删除节点
    handleRemoveNode(row){
      this.$confirm('确定要删除['+row.nodeName+']节点吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        row.id = row.pnId;
        this.$modal.loading("请稍候...");
        removeNode(row).then(response=>{
          this.$modal.closeLoading();
          this.$alert('操作成功!', '提示');
          this.getNodesTree();
        });
      }).catch(() => {});
    },

    //加载详情数据
    loadProjectDetail(){
      this.form.id = this.$route.query.id
      let nuFlag = (this.form.id === '' || this.form.id === null || this.form.id === undefined);
      if (!nuFlag) { 
         this.getCurrUserInfo(); 
      }
       
    },

    /** 导出按钮操作 */
    handleExport() {
      this.download('project/task/exportByProjectId', {
        ...this.queryParams
      }, `user_${new Date().getTime()}.xlsx`)
    },
    
    //提交修改责任人
    submitModifyUser(){
      modifyTaskUser(this.modifyUserForm).then(response=>{
         this.modifyUserOpen = false;
         this.$alert('操作成功!', '提示');
         this.getNodesTree();
      })
    },



    //关闭修改责任人弹框
    closeModifyUser(){
        this.modifyUserOpen = false;
        this.modifyUserForm = {userId:null,id:null};
    },

      //加载参加任务的人员列表
    handleTaskUsers(){ 
      getTaskUsers().then(response => {
        this.userList = response.data;
      });
    },

      //修改责任人
      handleModifyUser(row){
          this.modifyUserOpen = true;
          this.modifyUserForm = {userId:null,id:null};
          this.modifyUserForm.userId = row.userId,
          this.modifyUserForm.id = row.projectListNodeMemberId;
           
      },

      //加载当前用户信息
      getCurrUserInfo(){
          getUserProfile().then(response => {
              this.currUser = response.data;
               
              this.getProjectDetail();
              this.getNodesTree();
            
              // this.handleProgress();
            
              this.getTotalBugByProject();
              this.handleProjectModifyRecord();

              this.handleProjectOperLog();
              this.handleTaskUsers();
          });
      },

    //抓取项目日志
    handleProjectOperLog(){
      queryProjectOperLog(this.form.id).then(response=>{
         this.logs = response.data;
      })
    },

    //项目变更流程修改
    handleUpdateProjectModify(row){
      this.$refs.modify.initUpdate("项目变更",row);
      this.$refs.modify.handleHistoryDetail(row);   
         
    },

    //编辑项目成员
    handleEditMember(){
      this.$refs.modifyMember.open(this.projectMemberList,this.form.id,this.userList);
    },


    //查询项目变更记录
    handleProjectModifyRecord(){
      this.projectModifyRecordLoading = true;
      this.queryParams.id = this.form.id;
      queryProjectModifyRecord(this.queryParams).then(response=>{
            this.projectModifyRecord = response.rows;
            this.total = response.total;
            this.projectModifyRecordLoading = false;
      })
    },

    getStepStatus(o){
        if(o.doneRate >= 100){
           return 'success';
        }else if(o.doneRate > 0 && o.doneRate < 100){
           return 'process';
        }else{
           return 'wait';
        }
    },


    getTotalBugByProject(){
      this.buglistLoading = true;
      queryTotalBugByProject(this.form).then(response=>{
          this.bugData = response.data;
          this.getBugTypeChartData();
          this.buglistLoading = false;
      })
    },

    //里程碑描述
    handleDesc(o){

        if(o == null){
          return '';
        }

        if(o.startTime == null){
          return '';
        }

        return o.startTime+'-'+o.endTime +' 完成度:'+o.doneRate+'%';
    },
    //下载文件
    handleDownFile(row){
      console.log(row);
      if(row.plmFileName === null || row.plmFileName ===undefined || row.plmFileName ===''){//不是PLM文件
        downloadFileId(row.id,row.originName);
      }else{
        queryPLMFileUrl(row.id).then(response=>{
          window.open(response.data, '_blank');
        })
      }
      
    },

    //关闭附件弹出框
    close(){
       this.open = false;
       this.fileList = []; //情况文件列表缓存
    },
    
    //加载文件列表
    handleFileList(row){

      
        this.open = true;
        queryTaskFile(row.projectListNodeMemberId).then(response=>{
          this.fileList = response.data;
        })
       
      
    },

    // //项目进度
    // handleProgress(){
      
    //   queryProgress(this.form.id).then(response=>{
        
    //      this.getProjectProgressChart(response.data.progress);

    //   })
    // },

    //获取里程碑
    handleMilestone(treeList){
      this.milestonesLoading = true;
      getMilestone(this.form.id).then(response=>{
         this.res = response.data;
         this.milestonesLoading = false;
         for(let i=0;i<this.res.milestones.length;i++){
           let item = this.res.milestones[i];
 
           for(let j=0;j<treeList.length;j++){
            let temp = treeList[j];
            
               if(item.pnId == temp.pnId ){
                  item.doneRate = temp.doneRate;
                  if(item.doneRate  > 0 ){
                     this.res.active = i;
                     if(item.doneRate  == 100){
                      this.res.active = (i+1)
                      if(this.res.active > this.res.milestones.length){
                        this.res.active = this.res.milestones.length;
                      }
                     }
                  }
                  break;
               }
           } 
         }


      })
    },


    //获取树形节点
    getNodesTree(){
      this.taskLoading = true;
      getSetupDetail(this.form.id).then(response=>{
         this.tableData = response.data.treeList;
         this.versionNo = response.data.versionNo;
         this.handleMilestone(this.tableData);
         this.taskLoading = false; 

         
      })
    },

    //随机背景颜色
    randomBgColor(divIndex) {
      let index = divIndex%this.bgColor.length;
       
      return 'background-color: '+this.bgColor[index];
    },

    //姓名处理 取最后2位
    rosvleName(name){
        return   name.slice(-2);
    },

    //查看OA表单详情
    linkToOA(oaId){
      signLoginToEkp(oaId).then(response=>{
        if(response.code == 200){
          window.open(response.data.authorizationURL, '_blank');
        }else{
          this.$alert(response.data.msg, '错误');
        }  
                   
      })
    },



    //查询项目详情
    getProjectDetail(){
      this.$modal.loading("加载中...");
      getDetail(this.form.id).then(response =>{
          this.form = response.data;
          this.projectMemberList = response.data.projectListMemberList;
          this.getProjectProgressChart(this.form.progress);
          this.$modal.closeLoading();
      })
    },
    //项目进度
    getProjectProgressChart(progress){
      let projectProgressChart = echarts.init(document.querySelector(".project_progress"));


      let option = {
        series:  [
                {
                    type: 'gauge',
                    startAngle: 90,
                    endAngle: -270,
                    min: 0,
                    max: 100,
                    radius: '80%',
                    center: ['50%', '50%'],
                    progress: {
                        roundCap: 'true',
                        show: true,
                        width: 30,
                        itemStyle: {
                            color: '#3de21e',
                        }
                    },
                    axisLine: {
                        // 背景环
                        roundCap: 'true',
                        lineStyle: {
                            width: 30,
                            color: [[1, 'rgba(74,126,206,0.4)']]
                        }
                    },
                    pointer: { show: false },
                    axisTick: { show: false },
                    splitLine: { show: false },
                    axisLabel: { show: false },
                    title: {
                        offsetCenter: [0, '-20%'],
                        color: 'rgb(0,0,0)'
                    },
                    detail: {
                        valueAnimation: false,
                        fontSize: 20,
                        offsetCenter: [0, '20%'],
                        formatter: function (value) {
                            return value+'%'
                        },
                        color: 'rgb(0,0,0)'
                    },
                    data: [
                        {
                            value: progress,
                            name: '进度',
                        }
 
                    ]
                }
            ]
 
      };
       

      projectProgressChart.setOption(option);
    },

    //项目BUG 问题类型饼状图
    getBugTypeChartData(){
      queryTotalBugTypeByProject(this.form).then(response=>{
        this.getBugTypeChart(response.data);
      })
    },

    //项目进度
    getBugTypeChart(bugTypes){
      let bugTypeChart = echarts.init(document.querySelector(".bug_type"));


      let option = {
 
  
        series: [
          {
            
            type: 'pie',
            radius: ['40%', '50%'],
            avoidLabelOverlap: false,
            label: {
              show: true 
              
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 12
              }
            },
            labelLine: {
                  length: 10,
                  length2: 0,
                  maxSurfaceAngle: 80
            },
            labelLayout: (params) => {
                  const isLeft = params.labelRect.x < this.curEChartObj.getWidth() / 2
                  const centerX = this.curEChartObj.getWidth() / 2

                  let newX = 0
                  if (isLeft) {
                    newX = centerX - 50 - params.labelRect.width
                  } else {
                    newX = centerX + 50 + params.labelRect.width
                  }
                  const points = params.labelLinePoints

                  points[2][0] = isLeft
                    ? newX + 10
                    : newX

                  return {
                    x: newX,
                    labelLinePoints: points
                  }
                },
      
            data: bugTypes
          }
        ]
      }; 
      bugTypeChart.setOption(option);
    },
 

    
  }
};
</script>
<style>
  

  .left_item_card{
    margin-top: 10px;
  }

  .item_title_left{
    color: #409EFF;
    font-size: 20px;
  }
 
  .item_title{
    color: #409EFF;
    font-size: 26px;
  }

  .item_version{
    color: #9d9fa1;
    float: right;
  }

  .member_bom{
    color: #9d9fa1;
  }

  .member_div{
     
    overflow: auto;
  }

  .member{
    background-color: #409EFF;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 18px;
    font-weight: bold;
    padding-top: 9px;

  }

  .member_table td{
    padding: 10px;
    text-align: center;
  }

  .right{
    background-color: #FFFFFF;
    height: 1000px;
  }


  .app-container{
    padding: 10px;
  }
 

  .title{
    color: #409EFF;
    font-size: 32px;
  }

  .item{
    padding-top: 10px;
  }

  .item_top{
    padding-top: 20px;
  }

  .project_progress{
    max-height: 200px;
    max-width: 250px;
    width: 100%;
    height: 100%;
    min-height: 150px;
    min-width: 200px;
     
  }

  .progressView{
    position: relative;
    margin-left: 15%;
    margin-top: 25%;
  }

  .formatText {
    position: absolute;
    top: 70%;
    left: 45%;
    transform: translate(calc(-50% + 6px), -50%);
    width: calc(64%);
    height: calc(64%);
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    text-align: center;
    font-weight: bold;
    border-radius: 50%;


    .label {
      width: 100%;
      font-size: 14px;
      color:#9d9fa1; 
    }
 
  }

  .bugNum{
    background-color:  rgba(var(--color-gray-50-rgb),var(--tw-bg-opacity));
    height: 100%;
    border: 1px solid #e5e6e8;
    padding: 10px 25px;
    margin-top: 10%;
  }

  .bug_type{
    height: 250px;
    width: 250px;
  }

  .el-table__row--level-0{
    font-weight: bold;
    font-size: 16px;
  }
  

</style>
 
